
if(!window.Berta) window.Berta = {};

Berta.Pane = new /* ABSTRACT */ Class(function(){

	return {
		
		options: null,
		defaults: {
			container: null,	// DOM element of the pane
			type: 'default',	// type (contextual, settings, sections, ....)
			index: 0,			// index in the accordion
			callbacks: {
				onOpenStart: null,
				onOpen: null,
				onCloseStart: null,
				onClose: null,
				onLock: null,
				onUnlock: null,
				onResize: null
			}
		},
		
		// getter: returns event namespace for the instance
		namespace: function() {
			return '.Berta.Pane.' + (this.type ? (this.type + '.') : '') + this.index;
		},
		
		elements: null,
	
		isLocked: false,
		isOpen: false,
		isAnimating: false,
		index: 0,
		type: null,					
		contentContainer: null,		// DOM element that is direct parent of the variable pane content
		openCloseTimeout: null,
		
		
		constructor: function(options) {
			this.options = jQuery.extend({}, Berta.Pane.prototype.defaults, this.defaults, options);
			this.index = this.options.index;
			this.type = this.options.type;
			
			this.elements = {
				head: $('<div class="x-pane-title"><h3></h3></div>'),
				body: $('<div class="x-pane"></div>'),
				inside: null
			};
			this.elements.inside = $('<div class="x-pane-inside"></div>').appendTo(this.elements.body);
			//this.elements.inside.css('height', Math.round(Math.random() * 100) + 'px');
			
			this.empty();
		},
		
		//   .______    __    __  .______    __       __    ______    ////////////////////////////////////////////////////////////
		//   |   _  \  |  |  |  | |   _  \  |  |     |  |  /      |   ////////////////////////////////////////////////////////////
		//   |  |_)  | |  |  |  | |  |_)  | |  |     |  | |  ,----'   ////////////////////////////////////////////////////////////
		//   |   ___/  |  |  |  | |   _  <  |  |     |  | |  |        ////////////////////////////////////////////////////////////
		//   |  |      |  `--'  | |  |_)  | |  `----.|  | |  `----.   ////////////////////////////////////////////////////////////
		//   | _|       \______/  |______/  |_______||__|  \______|   ////////////////////////////////////////////////////////////


		// to be overrided

		beforeOpen: function() {},
		afterOpen: function() {},
		beforeClose: function() {},
		afterClose: function() {},
		
		
		
		// API
		
		setTitle: function(title) {
			this.elements.head.find('h3').html(title);
		},
		
		empty: function() {
			Berta.EditorManager.instance().unregisterEditables(this.elements.inside.find('.x-editable'));
			this.elements.inside.empty();
			this.loaderShow();
		},
		
		fill: function(content) {
			this.loaderHide();
			this.elements.inside.append(content);
		},
		
		open: function() {
			if(!this.isOpen && !this.isLocked) {
				if(this.openCloseTimeout) {
					clearTimeout(this.openCloseTimeout);
					this.openCloseTimeout = null;
				}
				
				!this.options.callbacks.onOpenStart || this.options.callbacks.onOpenStart(this.type);
				this.beforeOpen();
				this.elements.head.addClass('x-pane-title-active');
				this.elements.body.addClass('x-pane-active');
				//this.elements.body.css('height', '25px');
				this.fireResize();
				this.openCloseTimeout = setTimeout(this._(onOpenComplete), 100);
				return true;
			}
			return false;
		},
		
		close: function() {
			if(this.isOpen && !this.isLocked) {
				if(this.openCloseTimeout) {
					clearTimeout(this.openCloseTimeout);
					this.openCloseTimeout = null;
				}
				
				!this.options.callbacks.onCloseStart || this.options.callbacks.onCloseStart(this.type);
				this.beforeClose();
				this.elements.head.removeClass('x-pane-title-active');
				this.elements.body.removeClass('x-pane-active');
				this.elements.body.css('height', '');
				this.fireResize();
				this.openCloseTimeout = setTimeout(this._(onCloseComplete), 50);
				return true;
			}
			return false;
		},
		
		/* locks all other panes */
		lockingOn: function() {
			!this.options.callbacks.onLock || this.options.callbacks.onLock(this.type);
		},
		
		/* unlocks all other panes */
		lockingOff: function() {
			!this.options.callbacks.onUnlock || this.options.callbacks.onUnlock(this.type);
		},
		
		/* disables user interactions with the pane, whether opened or closed;
		 * usually called because of another pane which is locking
		 */
		disableInteraction: function() {
			this.elements.head.addClass('x-pane-title-disabled')
							  .unbind(this.namespace());
			this.isLocked = true;
		},
		/* (re)enables user interaction;
		 * usually called because of another pane which is UN-locking
		 */
		enableInteraction: function() {
			this.elements.head.removeClass('x-pane-title-disabled')
							  .bind('click' + this.namespace(), this._(onHeadClick));
			this.isLocked = false;
		},
		
		
		// for pane opening and closing
		getContentHeight: function() {
			return this.isOpen ? 
						(this.elements.inside.height() + parseInt(this.elements.inside.css('margin-top')) + parseInt(this.elements.inside.css('margin-bottom'))) : 
						0;
		},
		setHeight: function(h) {
			this.elements.body.css('height', h);
		},
		
		// for panel resizing
		getNeededHeight: function() {
			if(this.isOpen) {
				return Math.max(this.elements.inside.height() - this.elements.body.height(), 0);
			}
			return 0;
		},
		getSurplusHeight: function() {
			if(this.isOpen) {
				return Math.max(this.elements.body.height() - this.elements.inside.height(), 0);
			}
			return 0;
		},
		heightAdd: function(h) {
			this.elements.body.css('height', Math.round(this.elements.body.height() + h) + 'px');
		},
		
		
		loader: null,
		loaderShow: function() {
			if(!this.loader)
				this.loader = $('<div class="x-pane-loader">loading...</div>');
			this.loader.appendTo(this.elements.inside);
		},
		loaderHide: function() {
			if(this.loader) this.loader.detach();
			//this.loader = null;
		},
		
		destroy: function() {
			this.elements.head.empty().remove();
			this.elements.body.empty().remove();
			this.elements = null;
			this.loader.remove();
			this.loader = null;
			
			this.defaults = null;
			this.options = null;
		},
		
		
		fireResize: function() {
			!this.options.callbacks.onResize || this.options.callbacks.onResize(this.type);
		},
		fireOpen: function() {
			!this.options.callbacks.onOpen || this.options.callbacks.onOpen(this.type);
		},
		fireClose: function() {
			!this.options.callbacks.onClose || this.options.callbacks.onClose(this.type);
		}

	};
	
	
	//   .______   .______     __  ____    ____  ___   .___________. _______    //////////////////////////////////////////////////
	//   |   _  \  |   _  \   |  | \   \  /   / /   \  |           ||   ____|   //////////////////////////////////////////////////
	//   |  |_)  | |  |_)  |  |  |  \   \/   / /  ^  \ `---|  |----`|  |__      //////////////////////////////////////////////////
	//   |   ___/  |      /   |  |   \      / /  /_\  \    |  |     |   __|     //////////////////////////////////////////////////
	//   |  |      |  |\  \--.|  |    \    / /  _____  \   |  |     |  |____    //////////////////////////////////////////////////
	//   | _|      | _| `.___||__|     \__/ /__/     \__\  |__|     |_______|   //////////////////////////////////////////////////

	function onHeadClick() {
		if (!this.elements.head.hasClass('x-pane-title-dragged')) {
			if (!this.isAnimating) {
				if (this.isOpen) {
					this.close();
				} else {
					this.open();
				}
			}
		}
	}
	
	function onOpenComplete() {
		this.openCloseTimeout = null;
		this.isOpen = true;
		//this.elements.body.css('height', '40px');
		this.fireResize();
		this.afterOpen();
		this.fireOpen();
	}
	function onCloseComplete() {
		this.openCloseTimeout = null;
		this.isOpen = false;
		this.fireResize();
		this.afterClose();
		this.fireClose();
	}


}());
